<template>
  <Avatar v-for="pic in props.picList" :key="pic" size="large">
    <template #icon>
      <Image alt="暂无照片" :width="100" :height="100" :src="getAvatarView(pic)" />
    </template>
  </Avatar>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'PicBoolean',
    inheritAttrs: false,
  });
</script>
<script lang="ts" setup>
  import { computed, unref } from 'vue';
  import { Button, Tag, Avatar, Image } from 'ant-design-vue';
  import { PictureOutlined } from '@ant-design/icons-vue';
  import { buttonProps } from './props';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useGlobSetting } from '/@/hooks/setting';
  const globSetting = useGlobSetting();
  const { createMessage, createErrorModal } = useMessage();
  import { useUserStore } from '/@/store/modules/user';
  const userStore = useUserStore();
  const tk = userStore.getToken;

  const props = defineProps(buttonProps);
  // get component class
  const attrs = useAttrs({ excludeDefaultKeys: false });
  const getButtonClass = computed(() => {
    const { color, disabled } = props;
    return [
      {
        [`ant-btn-${color}`]: !!color,
        [`is-disabled`]: disabled,
      },
    ];
  });

  function onClickPreview(pic: string) {
    handlePreview([pic]);
  }

  function getAvatarView(avatarId) {
    if (props.boolVal) {
      return avatarId;
    }

    if (avatarId) {
      const uril = `${globSetting.apiBaseUrl}/api/v1/images222/${avatarId}?access_token=${tk}`;
      return uril;
    }

    return '';
  }
  function handlePreview(photos: Array<String>) {
    const onImgLoad = ({ index, url, dom }) => {
      console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
    };
    const imgList: string[] = [];
    if (photos) {
      photos.forEach((ele) => {
        if (ele) imgList.push(`${globSetting.apiBaseUrl}/api/v1/images333/${ele}?access_token=${tk}`);
      });
    }
    if (imgList.length > 0) {
      // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
      createImgPreview({
        imageList: imgList,
        defaultWidth: 700,
        rememberState: true,
        onImgLoad,
      });
    } else {
      createErrorModal({ title: '提示', content: '暂无图片' });
    }
  }

  // get inherit binding value
  const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
</script>
